<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MinnanoNihongo_Reading</title>
<!-- jQuery Mobile references -->
<link rel="stylesheet" href="css/jquery.mobile-1.4.2.min.css" />
<link rel="stylesheet" href="css/toast.css" type="text/css">
<script src="js/jquery-2.1.0.min.js"></script>
<script src="js/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/favourite.js"></script>
<script src="js/plugins/toast.js"></script>
<script src="js/reading-detail.js"></script>

<script type="text/javascript">
	$(document).ready(function() {
		$('a[task="favouriteTask"]').click(function() {
			var id = getUrlVars()["id"];
			processFavourite('r_', 'reading', id);
		});
	});
</script>

<style type="text/css">
#addFavourite:after {
	background-image: url("img/star-16-icon.png");
	background-size: 16px 16px;
}
</style>


</head>

<body onload="connectDB();">

	<div data-role="page" class="jqm-demos" id="panel-fixed-page1"
		data-title="Panel fixed positioning" data-url="panel-fixed-page1">

		<!-- Start header -->
		<div data-role="header" data-position="fixed" data-theme="b">
			<a href="reading.html" id="btnBack" data-ajax="false" 
				class="ui-btn ui-btn-left ui-mini ui-btn-inline ui-corner-all ui-btn-icon-left ui-icon-back">Back</a>
				
			<div data-role="controlgroup" data-type="horizontal"
                                class="ui-mini ui-btn-right" data-inline="true">
                                
                                <a id="" task="favouriteTask" href="#" data-ajax="false" data-direction="reverse"
                                        class="ui-btn ui-btn-inline ui-icon-star ui-btn-icon-notext">Add/Remove Favourite</a>

                                <a href="search.html" id="btnSearch" data-iconpos="notext" data-direction="reverse"
                                        data-ajax="false" class="ui-btn ui-btn-inline ui-icon-search ui-btn-icon-notext">Search</a>
                                        
                                <a href="favourite.html?action=reading" data-ajax="false" data-direction="reverse"
                                        class="ui-btn ui-btn-inline ui-icon-heart ui-btn-icon-notext">Favourite List</a>

                                <!-- <a href="index.html" id="btnHome" data-iconpos="notext" data-direction="reverse"
                                        data-ajax="false"
                                        class="ui-btn ui-btn-inline ui-icon-home ui-btn-icon-notext">Home</a> -->
             </div>
			<h1 id="title-detail" style="text-align: center;"></h1>
		</div>
		<!-- /header -->

		<!-- Start main content -->
		<div role="main" class="ui-content jqm-content jqm-fullwidth">

			<!-- show content -->
			<div id="content-js" data-type="vertical"
				style="text-align: justify;"></div>
			<!-- End show content -->

			</br>
			</br>
			</br>
			<!-- Script area -->
			<div data-role="collapsibleset">
				<!-- en -->
				<div data-role="collapsible" data-theme="a" data-content-theme="a">
					<h2>
						<center>Script En</center>
					</h2>
					<div role="main" id="content-en" style="text-align: justify;">
					</div>
				</div>
				<!-- vi -->
				<div data-role="collapsible" data-theme="a" data-content-theme="a">
					<h2>
						<center>Script Vi</center>
					</h2>
					<div role="main" id="content-vi" style="text-align: justify;">
					</div>
				</div>
			</div>

		</div>
		<!-- /end Script area -->


	</div>
	<!-- /content -->

	<!-- Start footer -->
	<div data-role="footer" data-position="fixed"></div>
	<!-- /footer -->


	</div>
</body>
</html>
